
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Button, InputItem, Toast, List } from 'antd-mobile-rn';
import constants from '../../utils/constants';

const styles = StyleSheet.create({
    InputItemView: {
        padding: 20,
        paddingBottom: 0,
        width:"100%",
        paddingRight:40
      

    }
});



export default class Register extends React.Component {


    constructor(props) {
        super(props);
        this.state = {
            phone: "",
            code: "",
            nickname: "",
            password: "",
            extraText: "发送验证码",
            showSetNickName: false
        }
    }

    handleValidPhone = () => {
        if (!this.state.phone || !this.state.code) {
           // Toast.info("手机号或验证码不能为空");
            //return;
        }
        // Toast.loading("操作中...", 0);
        // setTimeout(() => {
        //     Toast.hide();
        // }, 2000)


        this.setState({
            showSetNickName:true
        })

    }

    handleRegister = ()=>{
        const { navigate } = this.props.navigation;
        navigate("RegisterTags");
    }

    render() {

        const extraText = <Text style={{marginRight:0}}>{this.state.extraText}</Text>

        return (
            <View style={{flex:1
            }}>
                <View style={{ backgroundColor: "white", flex: 1, display: this.state.showSetNickName ? 'none' : "flex" }}>
                    <View style={styles.InputItemView}>
                        <InputItem
                            clear
                            defaultValue={this.state.phone}
                            type="phone"
                            value={this.state.phone}
                            onChange={(value) => {
                                this.setState({
                                    phone: value,
                                });
                            }}
                            maxLength={11}
                            placeholder="+86"

                        >
                            <Text>手机号：</Text>
                        </InputItem>
                    </View>
                    <View style={styles.InputItemView}>
                        <InputItem
                            clear
                            type="number"
                            value={this.state.code}
                            onChange={(value) => {
                                this.setState({
                                    code: value,
                                });
                            }}
                            extra={extraText}
                            style={{paddingRight:0}}

                        >
                            <Text>验证码：</Text>
                        </InputItem>
                    </View>
                    <View style={{ padding: 30, marginTop: 20 }}>
                        <Button
                            activeStyle={{ backgroundColor: constants.themeColor }}
                            type="primary"
                            style={{ backgroundColor: constants.themeColor, borderColor: 'white' }}
                            onClick={this.handleValidPhone}
                        >

                            下一步
               </Button>
                    </View>
                </View>
                <View style={{ backgroundColor: "white", flex: 1, display: this.state.showSetNickName ? 'flex' : "none" }}>

                    <View style={styles.InputItemView}>
                        <InputItem
                            clear
                            type="text"
                            value={this.state.nickname}
                            onChange={(value) => {
                                this.setState({
                                    nickname: value,
                                });
                            }}
                            placeholder=""

                        >
                            <Text>昵称：</Text>
                        </InputItem>
                    </View>
                    <View style={styles.InputItemView}>
                        <InputItem
                            clear
                            type="password"
                            value={this.state.password}
                            onChange={(value) => {
                                this.setState({
                                    password: value,
                                });
                            }}


                        >
                            <Text>密码：</Text>
                        </InputItem>
                    </View>
                    <View style={{ padding: 30, marginTop: 20 }}>
                        <Button
                            activeStyle={{ backgroundColor: constants.themeColor }}
                            type="primary"
                            style={{ backgroundColor: constants.themeColor, borderColor: 'white' }}
                            onClick={this.handleRegister}
                        >

                            下一步
                </Button>
                    </View>
                </View>
            </View>
        )
    }

}